<template>
	<view class="detail" :style="[{paddingTop:statusBar+ 'px'}]">
		<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
		<view class="navigation" :style="[{top:(statusBar-2)+ 'px'}]">
			<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
			<view class="navigation-title">详情</view>
		</view>
		<view class="navigation-position"></view>
		
		<view class="detail-content">
			<view class="detail-part">
				<view class="type-title">{{ accountDetail.reason }}</view>
				<view class="money-num come-money" v-if="accountDetail.money>0">
					<text>＋</text>
					<text>{{ accountDetail.money }}</text>
				</view>
				<view class="money-num out-money" v-else>
					<text></text>
					<text>{{ accountDetail.money }}</text>
				</view>
				<view class="detail-item">
					<view>类型</view>
					<view>{{ accountDetail.reason }}</view>
				</view>
				<view class="detail-item">
					<view>时间</view>
					<view>{{ accountDetail.created_at }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/* function getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1);
				let strs = str.split('&');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return requestParams;
	}
	let params = getRequestParams();
	let token = params['token'];
	let status_bar =  params['status_bar'];
	let source = 'wap'
	if(token!=undefined){
		uni.setStorage({
		    key: 'token',
		    data: token
		})
		source = 'app'
	}
	if(status_bar!=undefined){
		uni.setStorage({
		    key: 'status_bar',
		    data: status_bar
		})
	} */
	import store from "store"
	
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	
	export default {
		store,
		computed:{
			...mapGetters([
				'statusBar'
			])
		},
		data:()=>({
			accountDetail:{},
			source:source
		}),
		methods:{
			back(){
				if(this.source == 'wap'){
					uni.navigateBack()
				}else{
					backToApp.postMessage('back');
				}
			}
		},
		onLoad(options) {
			this.accountDetail = JSON.parse(decodeURIComponent(options.itemDetai))
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.detail-content{
		margin-top:30rpx;
	}
	.detail-part{
		width: 606rpx;
		background: #FFFFFF;
		border-radius:16rpx;
		margin:0 auto;
		padding: 0 40rpx 10rpx 40rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
		>view:last-child{
			border:none
		}
	}
	.type-title{
		padding: 40rpx 0 20rpx 0;
		text-align: center;
		font-size: 30rpx;
		font-weight: 400;
	}
	.money-num{
		font-size: 60rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700rpx;
		>text:nth-child(1){
			font-size: 40rpx;
			font-weight: 700rpx;
		}
	}
	.come-money{
		color: #FF9500;
	}
	.detail-item{
		display: flex;
		padding: 40rpx 0rpx 30rpx 0;
		justify-content: space-between;
		// padding-top: 40rpx;
		border-bottom: 1rpx solid #e5e5e5;
		>view:nth-child(1){
			font-size: 28rpx;
			color:#999999;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			color:#333333;
			font-weight: 500;
		}
	}
</style>